<template>
  <input class="upload" type="file" multiple @change="fileChange" />
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <img :src="item.url" alt="" />
    </li>
  </ul>
  <img :src="useResult" alt="" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const list = ref([]);
import { getBucket, getPictureList, putPicture } from '../../api/picture';
import axios from 'axios';

getBucket().then((res) => {
  console.log('res---->', res);
});
getPictureList().then((res) => {
  console.log('res---->', res);
  list.value = res;
});
const useResult = ref();
const fileChange = (event) => {
  let file = event.target.files[0];
  const formData = new FormData();
  formData.append('file', file);
  putPicture(formData).then((res) => {});
};
</script>
<style lang="less" scoped>
  ul{
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    li{
      list-style: none;
      margin: 10px;
      img{
        width: 100px;
      height: 100px;
      border-radius: 10px;
      }
    }
  }
  .upload{
    position: absolute;
  }
</style>
